<template>
	<view class="main">
		<!-- <view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view> -->
		<tou_hand1 handtitle='修改信息'></tou_hand1>
		<view class="show">
			
			<view class="sone">
				<view class="soneleft">小区名称：</view>
				<input placeholder="请输入小区名称" v-model="projectName"/>
			</view>
			<view class="sone">
				<view class="soneleft">小区地址：</view>
				<input placeholder="请输入小区详细地址" v-model="address"/>
			</view>
			<view class="sone">
				<view class="soneleft">区域联系人：</view>
				<input placeholder="请输入小区联系人" v-model="phoneName"/>
			</view>
			<view class="sone">
				<view class="soneleft">联系人电话（客服）：</view>
				<input placeholder="请输入联系人电话" v-model="phone"/>
			</view>
			<view class="sone">
				<view class="soneleft">微信客服二维码：</view>
				<view class="soneright">请上传客服的二维码</view>
			</view>
			<view class="kfour">
				<view class="kfourtxt">
					客服二维码上传：<span class="kfourbud">限制1张</span>
				</view>
				<view class="kfourfoot">
					<view class="simgs" v-show="showtype==1">
						<image :src="this.shimg"></image>
						<image class="add-img-del" @click="ycbtn" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
					</view>
					<view class="add-img-box" v-show="showtype==2">
						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
							<image class="add-img" @click="imgInfo(index)" :src="item.path" mode="aspectFill"></image>
							<image class="add-img-del" @click="delImg(index)" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</view>
						<view v-if="imgList.length < 1 " class="add-img-item" @click="openCamera">
							<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo" @click="tjbtn">
				提交修改
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {tou_hand1},
		mounted() {
			
		},

		data() {
			return {
				imgList: [],
				cloudimgList: [],
				imgCount: 1, //最多支持3张上传，可以修改
				value: '请选择城市',
				showPicker: false,
				projectName:"",//小区名
				address:"",//地址
				phoneName:"",//区域联系人
				phone:"",//区域联系人电话（客服电话）
				hat:[],
				projectId:"",
				shimg:"",
				showtype:1,
				ktap:1,
				kimg:''
			}
		},
		onLoad(options) {
			this.projectId=options.projectId
			this.main()
		},
		methods: {
			//获取某一小区详情和总用户数等信息
			main(){
				this.$base.request1('manager/project'+'/'+this.projectId, 'GET')
					.then(res => {
						var data=res.data.data
						this.projectName=data.projectName
						this.address=data.address
						this.phoneName=data.phoneName
						this.phone=data.phone
						this.shimg=this.$base.imgurl+data.wechatImg
						if(data.wechatImg){
							this.kimg=data.wechatImg
							this.showtype=1
						}else{
							this.showtype=2
						}
					})
					.catch(err => {
				
					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//上传图片
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				});
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			//隐藏图片
			ycbtn(){
				this.showtype=2
				this.ktap=2
			},
			//删除图片
			delImg(i) {
				this.imgList.splice(i, 1);
				this.hat.splice(i, 1);
				this.imgCount++;
			},
			openCamera() {
				this.ktap=2
				uni.chooseImage({
					// sourceType: ['camera'],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: res => {
			
						let path = res.tempFilePaths[0];
						let userToken = uni.getStorageSync('userToken');
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uni.uploadFile({
							url: Config.api + 'uploadFile',
							filePath: path,
							name: 'file',
							header: {
								Authorization: "Bearer " + userToken
							},
							success: res1 => {
								setTimeout(()=>{
									uni.hideLoading()
								},200)
								this.hat.push(JSON.parse(res1.data).data.fileName)
							}
			
						});
						this.imgList = [...this.imgList, ...res.tempFiles];
						this.imgCount = 3 - this.imgList.length;
					}
				});
			
			},
			//选择省市区确认按钮
			onConfirm(value,code) {
				  var tap=value[0]+' '+value[1]+' '+value[2]
				  this.code=this.columns[code[0]].children[code[1]].children[code[2]].code
			      this.value = tap;
			      this.showPicker = false;
			},
			//提交审核
			tjbtn(){
				let str = "";
				if(this.ktap==2){
					for (var i = 0; i < this.hat.length; i++) {
						str += this.hat[i] + ",";
					}
					//去掉最后一个逗号(如果不需要去掉，就不用写)
					if (str.length > 0) {
						str = str.substr(0, str.length - 1);
					}
				}else if(this.ktap==1){
					str=this.kimg
				}
				// if (!(/^1[3-9]\d{9}$/.test(this.phone))) {
				// 	this.$toast.fail('请输入正确的手机号格式')
				// 	return
				// }
				let data={
					code:this.code,
					projectName:this.projectName,
					address:this.address,
					phoneName:this.phoneName,
					phone:this.phone,
					imgNames:str,
					projectId:this.projectId
				}
				var header={
					'content-type': 'application/json'
				}
				this.$base.request1('manager/project', 'PUT',data,header)
				.then(res => {
					if(res.data.code==200){
						uni.setStorageSync('typeone',1)
						uni.showToast({
							title: '修改成功',
							duration: 2000,
						});
						uni.navigateBack()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {
			
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		.show{
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 13upx;
			/deep/.van-picker__toolbar{
				.van-picker__confirm{
					border: 0upx solid;
					background-color: #FFFFFF;
				}
				.van-picker__cancel{
					border: 0upx solid;
					background-color: #FFFFFF;
				}
			}
			
			.sone{
				width: 100%;
				border-bottom: 1upx solid #d6d6d6;
				display: flex;
				box-sizing: border-box;
				padding: 30upx 10upx;
				align-items: center;
				.soneleft{
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #666666;
					width: 39.2%;
				}
				.soneright{
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}
				input{
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}
			}
			.kfour {
				width: 100%;
				box-sizing: border-box;
				margin-top: 35upx;
				padding-left: 10upx;
				.kfourtxt {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
			
					.kfourbud {
						font-size: 24upx;
						color: #666666;
					}
				}
			.kfourfoot{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				.simgs{
					
					position: relative;
					border-radius: 26upx;
					image{
						width: 128upx;
						height: 128upx;
						border-radius: 26upx;
						padding: 9rpx 0;
						margin-right: 20upx;
						
					}
					.add-img-del {
						position: absolute;
						width: 40rpx;
						height: 40rpx;
						right: -14upx;
						top: -6upx;
						border-radius: 20rpx;
					}
				}
				.add-img-box {
					display: flex;
					width: 750rpx;
					//padding: 0 40rpx;
					flex-direction: row;
					flex-wrap: wrap;
				}
							
				.add-img-item {
					width: 128upx;
					height: 128upx;
					border-radius: 16upx;
					position: relative;
					padding: 9rpx 0;
					margin-right: 20upx;
				}
							
				.add-img-camera {
					flex: 1;
				}
							
				.add-img {
					width: 128upx;
					height: 128upx;
					border-radius: 16upx;
				}
							
				.add-img-del {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: -14upx;
					top: -6upx;
					border-radius: 20rpx;
				}
							
				.address-time {
					width: 484rpx;
					height: 88rpx;
					background-color: rgba(245, 245, 245, 1);
					opacity: 1;
					border-radius: 24rpx;
					text-align: center;
							
					font-size: 35rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}
							
				.line {
					width: 750rpx;
					height: 1px;
					transform: scaleY(0.3);
					background-color: rgba(0, 0, 0, 0.5);
				}
			}
				
			}
			.stwo{
				width: 686upx;
				height: 88upx;
				border-radius: 16upx;
				box-shadow: 0upx 4upx 9upx 0upx rgba(19,103,197,0.6); 
				background-color:#4B98ED;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				margin: 0 auto;
				color: #ffffff;
				margin-top: 50upx;
			}
		}
		
	}
</style>
